<template>
    <div class="djradio banxin">
        <!-- 推荐节目 -->
        <div class="recommend tanxin">
            <div class="djprogram_list">
                <div class="titles tanxin">
                    <h2>推荐节目</h2>
                    <div class="more">
                        更多 &gt;
                    </div>
                </div>
                <ul class="list">
                    <li class="tanxin" v-for="(item, index) in ProgramList" :key="index">
                        <div class="ablum">
                            <img :src="item.coverUrl" alt="" width="40px;">
                            <i title="播放" class="play" @click="playprogram(index)"></i>
                            <div class="info">
                                <p :title="item.name" class="name ellipsis" @click="$router.push(`/program/${item.id}`)">{{ item.name }}</p>
                                <span :title="item.dj.brand" class="desc" @click="$router.push(`/djradio/${item.radio.id}`)">{{ item.dj.brand }}</span>
                            </div>
                        </div>
                        <span class="note ">{{ item.radio.category }}</span>
                    </li>
                </ul>
            </div>
            <div class="djprogram_list">
                <div class="titles tanxin">
                    <h2>节目排行榜</h2>
                    <div class="more">
                        更多 &gt;
                    </div>
                </div>
                <ul class="list">
                    <li class="tanxin" v-for="(item, index) in TopList" :key="index">
                        <div class="ablum">
                            <span>{{ index + 1 }}</span>
                            <img :src="item.program.coverUrl" alt="" width="40px;">
                            <i title="播放" class="play" @click="playmusic(index)"></i>
                            <div class="info">
                                <p :title="item.program.name" class="name ellipsis" @click="$router.push(`/program/${item.program.id}`)">{{ item.program.name }}</p>
                                <span :title="item.program.dj.brand" class="desc" @click="$router.push(`/djradio/${item.program.radio.id}`)">{{ item.program.dj.brand }}</span>
                            </div>
                        </div>
                        <span class="note ">{{ item.program.radio.category }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 标题 -->
        <div class="title tanxin">
            <div class="title_l tanxin">
                <i class="quan"></i>
                <h2>推荐电台</h2>
            </div>
            <div class="title_r">
                <span>更多</span>
                <i class="jiantou"></i>
            </div>
        </div>
        <!-- 推荐电台 -->
        <div class="djradio_list">
            <ul class="tanxin">
                <li v-for="(item, index) in DjprogramList" :key="index">
                    <img :src="item.picUrl" alt="" @click="$router.push(`/program/${item.id}`)">
                    <div class="info ">
                        <h3 :title="item.name" class="name" @click="$router.push(`/program/${item.id}`)">{{ item.name }}</h3>
                        <p :title="item.program.radio.name" class="artist" @click="$router.push(`/djradio/${item.program.radio.id}`)">{{ item.program.radio.name }}</p>
                        <span class="note ellipsis">{{ item.program.radio.category }}</span>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 标题 -->
        <div class="title tanxin">
            <div class="title_l tanxin">
                <i class="quan"></i>
                <h2>推荐 MV</h2>
            </div>
            <div class="title_r">
                <span>更多</span>
                <i class="jiantou"></i>
            </div>
        </div>
        <!-- 推荐 MV -->
        <div class="djradio_list">
            <ul class="tanxin">
                <li v-for="(item, index) in MvList" :key="index" @click="$router.push(`/mvlist/${item.id}`)">
                    <img :src="item.picUrl" alt="" style="width:120px;">
                    <div class="info ">
                        <h3 :title="item.name" class="name">{{ item.name }}</h3>
                        <p :title="item.artistName" class="artist">歌手: {{ item.artistName }}</p>
                        <span class="note ellipsis">{{ item.copywriter }}</span>
                    </div>
                </li>
            </ul>
        </div>
        <MusicPlay :ids="ids" :imgUrl="imgUrl" :isPlay="isPlay" />
    </div>
</template>

<script>
import { DjprogramApi, MvApi, ProgramApi, ProgramToplistApi } from '@/request/api';
import MusicPlay from "@/components/MusicPlay.vue";
export default {
    data () {
        return {
            ProgramList: [],
            TopList: [],
            DjprogramList: [],
            MvList: [],
            ids: 0,
            imgUrl: "https://img2.baidu.com/it/u=1611088966,2458167776&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            isPlay: false,
        }
    },
    components: {
        MusicPlay,
    },
    created() {
        // 获取推荐节目(10)
        ProgramApi().then((res) => {
            // console.log(res);
            this.ProgramList = res.data.programs;
        })
        // 获取推荐音乐(10)
        ProgramToplistApi().then((res) => {
            // console.log(res);
            this.TopList = res.data.toplist;
        })
        // 获取推荐电台(6)
        DjprogramApi().then((res) => {
            console.log(res);
            this.DjprogramList = res.data.result;
        })
        // 获取推荐MV(4)
        MvApi().then((res) => {
            // console.log(res);
            this.MvList = res.data.result;
        })
    },
    methods: {
        playprogram(index) {
            this.ids = this.ProgramList[index].mainTrackId;
            this.imgUrl = this.ProgramList[index].coverUrl;
            this.isPlay = true;
        },
        playmusic(index) {
            this.ids = this.TopList[index].program.mainTrackId;
            this.imgUrl = this.TopList[index].program.coverUrl;
            this.isPlay = true;
        }
    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.djradio {
    margin: 0 auto;
    width: 900px;
    border: 1px solid #d3d3d3;
    border-top: none;
    background-color: #fff;
    padding: 40px;
    .title {
        height: 40px;
        border-bottom: 2px solid @red;
        display: flex;
        align-items: center;
        margin-top: 40px;
        .title_l {
            .quan {
                float: left;
                width: 15px;
                height: 15px;
                margin: 5px 10px;
                background: url('../../assets/images/public/index.png') no-repeat -235px -164px;
            }
            h2 {
                font-size: 24px;
                color: #333;
                cursor: pointer;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .title_r {
            span {
                font-size: 12px;
                color: #333;
                cursor: pointer;
                &:hover {
                    text-decoration: underline;
                }
            }
            .jiantou {
                float: right;
                width: 12px;
                height: 12px;
                margin: 5px;
                background: url('../../assets/images/public/index.png') no-repeat 0 -242px;
            }
        }
    }
    .djradio_list {
        ul {
            flex-wrap: wrap;
            display: flex;
            justify-content: flex-start !important;
            li {
                display: flex;
                width: 435px;
                height: 120px;
                margin-right: 30px;
                padding: 20px 0;
                border-bottom: 1px solid #d3d3d3;
                &:nth-of-type(2n) {
                    margin-right: 0;
                }
                &:nth-last-child(2) {
                    border: 0;
                }
                &:nth-last-child(1) {
                    border: 0;
                }
                img {
                    width: 120px;
                    height: 120px;
                    cursor: pointer;
                }
                .info {
                    width: 295px;
                    margin-left: 20px;
                    .name {    
                        color: #333;
                        font-size: 18px;
                        font-weight: bold;
                        margin: 20px 0;
                        line-height: 1.2;
                        cursor: pointer;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                    .note {
                        color: #999;
                        font-size: 12px;
                        border: 1px solid #999;
                        padding: 0 5px;
                        cursor: pointer;
                        &:hover {
                            color: #666;
                            font-size: 12px;
                            border: 1px solid #666;
                        }
                    }
                    .artist {
                        color: #666;
                        font-size: 12px;
                        margin-bottom: 10px;
                        cursor: pointer;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
        
    }
    .djprogram_list {
        .titles {
            height: 40px;
            width: 426px;
            border-bottom: 2px solid @red;
            display: flex;
            align-items: center;
            h2 {
                font-size: 24px;
                color: #333;
                cursor: pointer;
                &:hover {
                    text-decoration: underline;
                }
            }
            .more {
                font-size: 12px;
                color: #666;
                cursor: pointer;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .list {
            border: 1px solid #d3d3d3;
            border-top: 0px;
            li {
                width: 404px;
                padding: 10px;
                &:nth-of-type(2n) {
                    background: #F7F7F7;
                }
                &:hover {
                    cursor: pointer;
                    background: #eeeeee;
                    .play {
                        position: absolute;
                        top: 10px;
                        left: 10px;
                        width: 25px;
                        height: 25px;
                        background: url('../../assets/images/public/iconall.png') no-repeat 0px -86px;
                    }
                }
                
                .ablum {
                    position: relative;
                    display: flex;
                    span {
                        font-size: 16px;
                        color: @red;
                        padding-right: 5px;
                        display: flex;
                        align-items: center;
                    }
                    .info {
                        padding: 0 10px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        .name {
                            width: 254px;
                            font-size: 12px;
                            color: #333;
                            cursor: pointer;
                            &:hover {
                                text-decoration: underline;
                            }
                        }
                        .desc {
                            font-size: 12px;
                            color: #999;
                            cursor: pointer;
                            &:hover {
                                text-decoration: underline;
                            }
                        }

                    }
                }
                .note {
                    margin: auto 0;
                    padding: 2px 5px;
                    color: #999;
                    font-size: 12px;
                    border: 1px solid #999;
                    cursor: pointer;
                    &:hover {
                        color: #666;
                        font-size: 12px;
                        border: 1px solid #666;
                    }
                }
            }
        }
    }
}
</style>